<template>
  <div class="HoldAPosition">
    <div class="Hold">
      <div class="Hold-middle">
        <div class="tabList">
          <el-tabs v-model="activeName" class="tabs" @tab-click="tabchange">
            <el-tab-pane name="vanilla" label="个股香草">
              <vanilla></vanilla>
            </el-tab-pane>
            <el-tab-pane name="snowball" label="个股雪球"></el-tab-pane>
            <!-- <el-tab-pane name="purchase" label="累购"></el-tab-pane> -->
            <el-tab-pane name="IndexVanilla" label="指数香草"></el-tab-pane>
            <el-tab-pane name="DirectionGivers" label="指数雪球"></el-tab-pane>
            <el-tab-pane name="ihkstock" label="港股香草"></el-tab-pane>
            <!-- <el-tab-pane name="SimulatedPosition" label="模拟持仓"></el-tab-pane> -->
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vanilla from "@/components/HoldAPosition/vanilla.vue";
export default {
  name: "HoldAPosition",
  components: {
    vanilla
  },
  data() {
    return {
      value1: "",
      activeName: "vanilla"
    };
  },
  methods: {
    tabchange(tab) {}
  }
};
</script>

<style lang="less" scoped>
.HoldAPosition {
  // 头部
  .Hold {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .Hold-top {
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: #1e2024;
    line-height: 24px;
    display: flex;
    justify-items: flex-start;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0 20px;
    box-sizing: border-box;
  }
  .Hold-clock {
    margin: 15px 30px 0px 10px;
  }
  .Hold-money {
    font-size: 16px;
    line-height: 20px;
    color: #e93030;
  }
  // 列表
  .Hold-middle {
    .tabList {
      // margin: 16px 0 30px 0;
      width: 100%;
      height: auto;
      border-radius: 10px;
      .el-tabs--border-card {
        border-radius: 10px;
        border: none;
        box-shadow: none;
      }
      .options {
        display: flex !important;
        justify-content: space-around;
        text-align: center;
      }
    }
  }
}
/deep/ .el-tabs__nav-wrap::after {
  height: unset;
}
/deep/ .el-tabs__active-bar {
  background: #000;
}
/deep/ .el-tabs__item:hover {
  color: #000;
}
/deep/.tabs {
  .el-tabs__header {
    border-bottom: none !important;
    background: #f7f7f7 !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    height: 69px;
  }
  .el-tabs__item.is-active {
    color: #000;
  }
  .el-tabs__item {
    padding: 0 !important;
    width: 100px;
    height: 34px;
    line-height: 34px;
    border-radius: 3px;
    font-size: 16px;
    border: unset;
    text-align: center;
  }
  .el-tabs__nav {
    height: 69px;
    line-height: 69px;
    margin-left: 28px;
  }
}
</style>



